import Vue from 'vue'
import Vuex from 'vuex'
import { loginApi } from '@/api'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('token') || '',
    refresh_token: localStorage.getItem('refresh_token') || ''
  },
  mutations: {
    // 修改state中的token
    setToken (state, token) {
      state.token = token
      // 将token存储到本地
      localStorage.setItem('token', token)
      //       【本地存储包括面试题】
      // localstorage sessionstorage Cookie indexDB
      // 他们的共同点都是用来在浏览器中存储数据
      // 都存到硬盘，vue×存到内存，所以vue×刷新会消失本地存储则不会
      // 他们都只能存放字符串如果想要存放对象造过JS0N.str1 ngify进行转换
      // Localstorage.setItem('token',JSON.stringify({a:1 })
      // //Localstorage将数据存放在本地可以跨页面访问5M
      // SessionStorage临时会话存储如果当前页面关闭存储清空如果同一个网站开了多个标签页可以跨标签页面访问5M
      // Cookie浏览器存储的一种cookie大小之后4k左右（不同浏览器cook1e的大小也不同）
      // cook1e会随着请求一起发送到后端里面通常存放用户信息用户配置用户token
    },
    setRefReshToken (state, refresh_token) {
      state.refresh_token = refresh_token
      localStorage.setItem('refresh_token', refresh_token)
    }
    // 为什么使用vuex实现登陆功能
    // 正常的企业开发场景会将登陆获取用户信息等功能放在vuex的actions中进行调用
    // token多处多次使用是一个公共的状态vuex更适合公共状态管理
    // 由于vuex不能实现刷新保存所以还需要将token数据存放在本地一份(localSorage,cookie)
    // vuex实现登陆并保存token的步骤
    // 1、在vuex中的state里定义变量
    // 2在mutations中定义修改state数据的方法
    // 3:需要在vueX中引入接口(登陆接▣)
    // 4、在actions中实现接口的调用同时调用vuex中的mutatios中的方法实现将
    // ,接口的返回值存放在Vuex的state中
    // 5、在需要调用登陆接回的文件中通过mapActions或者this.$store,dispatch(asyncLoginAction,"传入的接回所需参数)
  },
  actions: {
    async asyncLoginAction (store, val) {
      try {
        const res = await loginApi(val)
        const { refresh_token, token } = res.data.data
        store.commit('setToken', token)
        store.commit('setRefReshToken', refresh_token)
        return Promise.resolve(res)
      } catch (err) {
        return Promise.resject(err)
      }
    }
  },
  modules: {
  }
})
